{include file='chat/base/header' /}
<style>
    /* bubble style */
    .sender {
        clear: both;
    }

    .sender div:nth-of-type(1) {
        float: left;
    }

    .sender div:nth-of-type(2) {
        background-color: turquoise;
        float: left;
        margin: 0 20px 10px 15px;
        padding: 10px 10px 10px 0px;
        border-radius: 7px;
    }

    .receiver div:first-child img,
    .sender div:first-child img{
        width:50px;
        height: 50px;
    }

    .receiver{
        clear:both;
    }
    .receiver div:nth-child(1){
        float: right;
    }
    .receiver div:nth-of-type(2){
        float:right;
        background-color: #d7d4f0;
        margin: 0 10px 10px 20px;
        padding: 10px 0px 10px 10px;
        border-radius:7px;
    }

    .left_triangle{
        height:0px;
        width:0px;
        border-width:8px;
        border-style:solid;
        border-color:transparent black transparent transparent;
        position: relative;
        left:-16px;
        top:3px;
    }

    .right_triangle{
        height:0px;
        width:0px;
        border-width:8px;
        border-style:solid;
        border-color:transparent transparent transparent black;
        position: relative;
        right:-16px;
        top:3px;
    }
</style>
<body class="gray-bg">
<div class="wrapper wrapper-content  animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox chat-view">
                <div class="ibox-title">
                    <small class="pull-right text-muted">最新消息：<span id="time">{$time.time}</span></small> 聊天窗口
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-md-9 ">
                            <div class="chat-discussion" id="box">
                                {volist name='chat' id='chat_data'}
                                {if condition="$chat_data.uid == $user.Id"}
                                <div class="receiver">
                                    <div>
                                        <img class="img-circle" src="http://q1.qlogo.cn/g?b=qq&nk={$chat_data.qq}&s=160">
                                    </div>
                                    <div>
                                        <div class="right_triangle"></div>
                                        <span>{$chat_data.data}</span>
                                    </div>
                                </div>
                                {else/}
                                <div class="sender">
                                    <div>
                                        <img class="img-circle" src="http://q1.qlogo.cn/g?b=qq&nk={$chat_data.qq}&s=160">
                                    </div>
                                    <small><!--<span class="pull-left label label-warning">站长</span>-->{$chat_data.name}</small><br>
                                    <div>
                                        <div class="left_triangle"></div>
                                        <span>{$chat_data.data}</span>
                                    </div>
                                </div>
                                {/if}
                                {/volist}
                                <!-- Right -->
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="chat-users">
                                <div class="users-list" id="user_list">
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="chat-message-form">

                                <div class="form-group">

                                    <textarea id="text" class="input-btn form-control message-input" name="message" placeholder="输入消息内容，按回车键发送"></textarea>
                                </div>
                                <div align="right">
                                    <button type="submit" onclick="check1();" class="send-btn btn-primary ">
                                        <i class="fa fa-check"></i>发表
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>


                </div>

            </div>
        </div>

    </div>


</div>
{include file='chat/base/footer' /}
<script>
    var element = document.getElementById("box");
    element.scrollTop = element.scrollHeight;
    ws = new WebSocket('ws://{$ip}:8282');
    ws.onopen = function () {
    };
    ws.onmessage=function (e)
    {
        var message1=eval("("+e.data+")");
        var element = document.getElementById("box");
        element.scrollTop = element.scrollHeight;
        switch (message1.type) {

            case "text":
                var new_time = new Date();
                document.getElementById("time").innerText = new_time.toLocaleString();
                if (message1.id == '{$user.Id}') {
                    $(".chat-discussion").append('<div class="receiver">\n' +
                        '                                    <div>\n' +
                        '                                        <img class="img-circle" src="http://q1.qlogo.cn/g?b=qq&nk=' + message1.qq + '&s=160">\n' +
                        '                                    </div>\n' +
                        '                                    <div>\n' +
                        '                                        <div class="right_triangle"></div>\n' +
                        '                                        <span>' + message1.data + '</span>\n' +
                        '                                    </div>\n' +
                        '                                </div>');
                } else {
                    $(".chat-discussion").append('<div class="sender">\n' +
                        '                                    <div>\n' +
                        '                                        <img class="img-circle" src="http://q1.qlogo.cn/g?b=qq&nk=' + message1.qq + '&s=160">\n' +
                        '                                    </div>\n' +
                        '                                    <small>' + message1.name + '</small><br>\n' +
                        '                                    <div>\n' +
                        '                                        <div class="left_triangle"></div>\n' +
                        '                                        <span>' + message1.data + '</span>\n' +
                        '                                    </div>\n' +
                        '                                </div>');
                }
                break;
            case "login":
                $.post('bind', {client_id: message1.id}, function (data) {
                }, 'json');
                break;
            case "login_in":
                $.get('online', function (json, status) {
                    $('#user_list').html("");
                    for (var i = 0; i < json.length; i++) {
                        $('#user_list').append('<div class="chat-user">\n' +
                            '                                        <span class="pull-right label label-primary">在线</span>\n' +
                            '                                        <img class="chat-avatar img-circle" src="http://q1.qlogo.cn/g?b=qq&nk=' + json[i].qq + '&s=160" alt="">\n' +
                            '                                        <div class="chat-user-name">\n' +
                            '                                            <a href="?uid=' + json[i].uid + '">' + json[i].name + '</a>\n' +
                            '                                        </div>\n' +
                            '                                    </div>');
                    }
                });
                break;
            case "login_out":
                $.get('online', function (json) {
                    $('#user_list').html("");
                    for (var i = 0; i < json.length; i++) {
                        $('#user_list').append('<div class="chat-user">\n' +
                            '                                        <span class="pull-right label label-primary">在线</span>\n' +
                            '                                        <img class="chat-avatar img-circle" src="http://q1.qlogo.cn/g?b=qq&nk=' + json[i].qq + '&s=160" alt="">\n' +
                            '                                        <div class="chat-user-name">\n' +
                            '                                            <a href="?uid=' + json[i].uid + '">' + json[i].name + '</a>\n' +
                            '                                        </div>\n' +
                            '                                    </div>');
                    }
                });
                break;
        }
    };
    function check1()
    {
        var text=document.getElementById("text");
        var data='{"data":"'+text.value+'","type":"message","id":"{$user.Id}","qq":"{$user.qq}","name":"{$user.name}"}';
        var input=data.replace(/[\r\n]/g,"</br>");
        ws.send(input);
        $.post('in_data',{data:text.value,uid:"{$user.Id}",qq:"{$user.qq}",name:"{$user.name}"}, function(data){}, 'json');
        document.getElementById("text").value="";
    }
</script>

</body>

</html>
